<template>
    <view class="liveLog">
        <uv-sticky :offset-top="offsetTop">
            <view class="flex flex-align flex-bt searchBar">
                <uni-search-bar class="flex-1" placeholder="输入昵称/ID" cancelButton="none"
                    :focus="false" v-model="searchValue">
                </uni-search-bar>
                <view class="searchText" @click="cancel">搜索</view>
            </view>
        </uv-sticky>
        <view class="liveLogList">
            <view class="flex flex-align flex-bt liveLogTitle">
                <view class="left">观看用户({{total_count}})</view>
                <view class="right">观看时长</view>
            </view>
            <view v-if="list.length > 0" class="liveLogItem flex flex-align flex-bt out-shadow" v-for="(item, index) in list"
                :key="index">
                <view class="liveLogItemLeft">
                    <view class="liveLogItemLeftImg">
                        <image :src="item.headimg" mode="aspectFill"></image>
                    </view>
                    <view class="liveLogItemLeftInfo">
                        <view class="liveLogItemLeftInfoName">{{ item.nickname }}</view>
                        <view class="liveLogItemLeftInfoID flex flex-align">
                            <image src="/static/teamcenter/center09.png" />
                            <view>{{ item.id }}</view>
                        </view>
                    </view>
                </view>
                <view class="liveLogItemRight">
                  {{type == 1 ? secondsToTime(item.today_look_time) : secondsToTime(item.yesterday_look_time)}}
                </view>
            </view>
            <view v-if="list.length == 0">
                <view class="noData" style="padding-top: 10vh;">
                    <image src="/static/nodata/nodata02.png" />
                    <view class="noDataText">暂无数据</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import API_CENTER from '@/api/teamcenter';
import { secondsToTime } from '@/utils/index'
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
const type = ref<number>(1)
const searchValue = ref<string>('')
const total_count = ref<number>(0)
const infiniteLoadResult = ref<any>(); 
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad((options: any) => {
    type.value = Number(options.type);
    uni.setNavigationBarTitle({
        title: type.value == 1 ? '今日观看' : '昨日观看'
    })
     // 在onLoad中初始化useInfiniteLoad
    infiniteLoadResult.value = useInfiniteLoad(
        type.value == 1 ? API_CENTER.getLiveLog : API_CENTER.getYesterdayLiveLog,
        {
            initialParams: {},
            transformResponse: (response) => {
                total_count.value = response.total_count;
                return response.list || [];
            },
        }
    );

    // 调用加载方法
    infiniteLoadResult.value.loadMore();
})
// 解构响应式属性
const list = computed(() => infiniteLoadResult.value?.list || []);
const isLoading = computed(() => infiniteLoadResult.value?.isLoading || false);
const hasMore = computed(() => infiniteLoadResult.value?.hasMore || false);
const loadMore = () => infiniteLoadResult.value?.loadMore();
const reset = () => infiniteLoadResult.value?.reset();

const cancel = () => {
    if (infiniteLoadResult.value && infiniteLoadResult.value.params) {
        infiniteLoadResult.value.params.keyword = searchValue.value;
    }
    reset()
    loadMore()
}

onReachBottom(() => {
  // 还有更多数据且不在加载中时，加载更多
  if (hasMore.value && !isLoading.value) {
    loadMore()
  }
})
</script>
<style scoped lang="scss">
.searchBar {
    background: #fff;
    padding-right: 20rpx;
    .searchText {
        background: #3C7CFF;
        color: #fff;
        padding: 12rpx 30rpx;
        border-radius: 20rpx;
    }
}

.liveLogList {
    padding: 20rpx;

    .liveLogTitle {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 30rpx;
    }
}

.liveLogItem {
    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}

.liveLogItemLeft {
    display: flex;
    align-items: center;
}

.liveLogItemLeftImg {
    image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }
}

.liveLogItemLeftInfo {
    flex: 1;
    margin-left: 20rpx;

    .liveLogItemLeftInfoID {
        background: #D4E3FF;
        margin-top: 10rpx;
        width: 160rpx;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
        border-radius: 30rpx;
        color: #3C7CFF;

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
    }
}

.liveLogItemLeftInfoName {
    font-size: 28rpx;
    font-weight: bold;
}

.liveLogItemRight {
    margin-top: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
}
</style>